import { Input } from 'antd'
import SvPanel from './SvPanel'
import HueSlider from './HueSlider'
import AlphaSlider from './AlphaSlider'

const PickerPopoverContent = (props) => {
  const { showAlpha, displayedColor, value, onChange, color, onColorChange } = props

  const onValueChange = (e) => {
    onChange(e.target.value)
  }

  return (
    <>
      <div className="color__panel">
        <SvPanel color={color} onChange={onColorChange} />
        <HueSlider color={color} onChange={onColorChange} />
      </div>
      {showAlpha ? <AlphaSlider color={color} onChange={onColorChange} /> : null}
      <div className="color__value">
        <Input value={value} onChange={onValueChange} size="small" />
        <div className="color__preview" style={{ backgroundColor: displayedColor }} />
      </div>
    </>
  )
}

export default PickerPopoverContent
